import axios from "axios"
import {useState,useEffect} from "react"
import {useNavigate} from 'react-router-dom'
import {Sticky,Search,Toast,Tabs,Popup,Stepper} from 'react-vant'
import './List.css'
export default function List() {
    let [value,setValue]=useState("")
    let [list,setList]=useState([])
    let [cate,setCate]=useState([])
    let navigate=useNavigate()
    let [visible,setVisible]=useState(false)
    let [xiang,setxiang]=useState({})
    let [arr,setarr]=useState([])
    let [indexs,setindexs]=useState(-1)

    useEffect(()=>{
        getlist()
        getcate()
    },[])
    let getlist=async()=>{
        let {data}=await axios.get("http://localhost:3000/getlist")
        console.log(data);
        if(data.code===200){
            setList(data.data)
        }
    }
    let getcate=async()=>{
        let {data}=await axios.get("http://localhost:3000/getcate")
        console.log(data);
        if(data.code===200){
            setCate(data.data)
        }
    }
    let getxiang=async(id)=>{
        let {data}=await axios.get("http://localhost:3000/find",{params:{_id:id}})

        console.log(data);
        if(data.code===200){
            setxiang(data.data)
            setarr([...data.data.content])

        }
    }
    let addcar=async(val)=>{
        if(indexs===-1){
            Toast("请选择规格")
            return
        }
        
        let {data}=await axios.post('http://localhost:3000/addcar',{
            title:val.title,
            price:val.price,
            img:val.img,
            content:arr[indexs]
        })
        console.log(data);
        if(data.code===200){
            Toast("购物车添加成功")
            setindexs(-1)
        }
    }
    let jia=async(id)=>{
        console.log(id);
        
        let {data}=await axios.post('http://localhost:3000/jia',{_id:id})
        console.log(data);
        if(data.code===200){
            Toast("加购成功")
            getlist()
            getxiang(id)
        }
    }
    let jian=async(id)=>{
        console.log(id);
        
        let {data}=await axios.post('http://localhost:3000/jian',{_id:id})
        console.log(data);
        if(data.code===200){
            Toast("加购成功")
            getlist()
            getxiang(id)
        }
    }
  return (
    <div>
        <Sticky>
            <Search
                value={value}
                placeholder="请输入搜索关键词"
                showAction
                onClickInput={() => {
                    navigate("/searchs")
                }}
            />
        </Sticky>
        <Tabs>
            {cate.map(item => (
            <Tabs.TabPane key={item._id} title={item.name}>
                <div>
                    {
                        list.filter(i=>i.cate===item._id).map((item)=>{
                            return <div key={item._id} style={{width:"150px",float:"left",margin:"10px"}}>
                                <img src={item.img} style={{width:"100px",height:"100px"}} alt=""/>
                                <p>{item.title}</p>
                                <p style={{color:"red",fontSize:"20px"}}>￥{item.price}</p>
                                <button onClick={()=>{getxiang(item._id),setVisible(true)}}>加入购物车</button>
                            </div>
                        })
                    }
                </div>
            </Tabs.TabPane>
            ))}
        </Tabs>
        <Popup
            visible={visible}
            closeable
            style={{ height: '60%' }}
            position='bottom'
            round
            onClose={() => setVisible(false)}
        >
            <div>
                <div style={{display:"flex",}}>
                    <img src={xiang.img} style={{width:"100px",height:"100px"}} alt=""/>
                    <div>
                        <p>{xiang.title}</p>
                        <p style={{color:"red",fontSize:"20px"}}>￥{xiang.price}</p>
                    </div>
                </div>
                <div>
                    <p>数量：
                    <Stepper
                        defaultValue={xiang.num}
                        onOverlimit={() => console.log('overlimit')}
                        onMinus={() => jian(xiang._id)}
                        onPlus={() => jia(xiang._id)}
                        onChange={v => console.log(v)}
                    />
                    </p>
                    <p>尺码：{arr.map((item,index)=>{
                        return <button key={index} style={{marginLeft:"10px"}} onClick={()=>setindexs(index)} className={indexs===index?"active":""}>{item}</button>
                    })}</p>
                </div>
                <button onClick={()=>{addcar(xiang),setVisible(false)}}>加入购物车</button>
            </div>

        </Popup>
    </div>
  )
}
